<template>
  <div class="calendar-30">
    <ul class="calendar-30-header">
      <li v-for="item in headerData" :key="item" class="calendar-30-header-week">
        {{ item }}
      </li>
    </ul>
    <ul class="calendar-30-body">
      <li
        v-for="(item, index) in bodyData"
        :key="index"
        :class="['calendar-30-body-day', item.day && item.index < 6 ? 'can-select' : '', modelValue === item.day ? 'selected' : ''].join(' ')"
      >
        <slot name="date-cell" :data="{ ...item, selected: item.day && modelValue === item.day && item.index < 6 }" />
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import dayjs from "dayjs";
const modelValue = defineModel();
const bodyData = ref([]);
const headerData = ["日", "一", "二", "三", "四", "五", "六"];
const getNext30Days = () => {
  const today = new Date(); // 获取今天的日期
  const daysArray = [];

  for (let i = 0; i < 30; i++) {
    let date = new Date(today);
    date.setDate(today.getDate() + i); // 设置为未来的i天

    // 将日期格式化为你需要的格式，这里以ISO 8601格式为例
    const obj = { day: dayjs(date).format("YYYY-MM-DD"), index: i, label: dayjs(date).format("MM-DD"), isToday: i == 0 };
    daysArray.push(obj); // 只保留日期部分，去掉时间部分
  }

  return daysArray;
};
const getDays = () => {
  const startWeekDay = dayjs().day();
  const start_arr = new Array(startWeekDay).fill({});
  const data_30 = getNext30Days();
  const endWeekDay = dayjs(data_30[29].day).day();
  const end_arr = new Array(6 - endWeekDay).fill({});
  bodyData.value = [...start_arr, ...data_30, ...end_arr];
};
onMounted(() => {
  modelValue.value = dayjs().format("YYYY-MM-DD");
  getDays();
});
</script>
<style lang="scss" scope>
.calendar-30 {
  width: 100%;

  &-header {
    display: flex;
    width: 100%;
    padding-bottom: 10px;

    &-week {
      flex-grow: 1;
      width: calc(100% / 7);
      text-align: center;
    }
  }

  &-body {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-top: 1px solid #ebebeb;
    border-left: 1px solid #ebebeb;

    &-day {
      flex-grow: 1;
      width: calc(100% / 7);
      height: 58px;
      text-align: center;
      border-right: 1px solid #ebebeb;
      border-bottom: 1px solid #ebebeb;
    }
  }

  .can-select {
    cursor: pointer;
  }

  .selected {
    background: rgb(59 130 246 / 10%);
  }
}
</style>
